<template>
	<view>
	<view class="content">
		<view class="list">
			<view class="list-item" v-for="(item,index) in dataList1" :key="index">
				<view class="flex-box u-flex" >
					<text class="file-text">{{item.createtime_text}}</text>
					<u-icon name="..." color="#4871C0" size="24" @click="opentopic_template(item)" ></u-icon>
				</view>
				<!-- <view class="images u-flex">
					<view class="iamges-item" v-for="(item,index) in item.images">
						<u--image :src="item.fullurl||'https://cdn.uviewui.com/uview/album/1.jpg'" radius="16rpx"
							width="136rpx" height="136rpx">
						</u--image>
					</view>
				</view> -->
				<!-- <view class="file-box u-flex" @click.stop="handleDownload(item.files)" v-if="item.files&&(typeof item.files)=='object'">
					<u-icon name="attach" color="#4871C0" size="24"></u-icon>
					<text class="file-text">{{ item.files.filename }}</text>
				</view> -->
				<view class="file-box u-flex" @click.stop="handleDownload(v)" v-show="item.files&&item.files.length>0" v-for="(v,i) in item.files" :key="i">
					<u-icon name="attach" color="#4871C0" size="24"></u-icon>
					<text class="file-text">{{ v.filename }}</text>
				</view>
				<view class="flex-text">
					{{ item.content }}
				</view>
				<view class="step-box">
					<u-steps current="1" direction="column">
						<view class="" v-for="(sitem,sindex) in item.check" :key="sindex" v-if="item.check&&item.check.length>0">
							<u-steps-item :title="sitem.check_text" :desc="sitem.createtime_text"
								:contents="sitem.content">
								
								<text v-if="sitem.status == 1" class="slot-icon" slot="icon">
									<u-icon name="checkmark-circle" color="#4871C0" size="20"></u-icon>
								</text>
								<text v-if="sitem.status == 0" class="slot-icon" slot="icon">
									<u-icon name="close-circle" color="#FF7A00" size="20"></u-icon>
								</text>
							</u-steps-item>
						</view>
					</u-steps>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<u-loadmore v-if="dataList1.length" :status="loadStatus" />
		
		<u-empty v-if="!dataList1.length && !isLoading" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
		<view class="button" @click="upTopics()">
			上传议题
		</view>
	</view>
	<u-popup :show="showTemp" mode="bottom" @close="closetopic_template" @open="opentopic_template"
		:closeable="true" :border-radius="10" close-icon-color="#010101" :mask-close-able="false"
		close-icon-size="42">
		<view class="content" style="height:60%">
			<view class="title">操作</view>
			<!-- <view @click="seltopic_template(v)" :class="select==v.id?'meet active':'meet '" -->
			<view @click="seltopic_template(v)" class="meet"
				v-for="(v, i) in caozuotype">
				{{ v.name }}
				<!-- <text> -->
					<!-- <img src="@/static/assets/images/dui.png" v-if="select==v.id" /></text> -->
			</view>
		</view>
	</u-popup>
   </view>
</template>

<script>
	import {
		editTopic,
		getTopicmylists,
		deleteTopic
	} from '@/api/meetApi.js'
	export default {
		data() {
			return {
				showTemp: false,
				reason: '',
				meet_id: '',
				meetdeal:{},
				dataList1:[],
				caozuotype:[{id:0,name:'编辑议题'},{id:1,name:'删除议题'}],
				select:0,
				loadStatus:'',
				page: 1,
				limit: 12,
				lastPage: 0,
				
			}
		},
		onLoad(options) {
			this.meet_id = options.id
		},
		onShow() {
			this.dataList1=[];
			this.getTopicmylistsdata()
		},
		onReachBottom: function() {
			if (this.page < this.lastPage) {
				this.page += 1;
				this.getDataList1()
			}
		},
		methods: {
			opentopic_template(item) {
				if(item&&item.id){
					this.meetdeal.id=item.id;
				}
				this.showTemp = true;
			},
			closetopic_template() {
				this.showTemp = false;
			},
			seltopic_template(item) {
				this.select = item.id;
				this.showTemp = false;
				if(this.select===0){
					uni.navigateTo({
						url: '/pages/tabbar-1-detial/uploadTopics/editTopics?id=' + this.meetdeal.id
					});
				}else{
					this.godeleteTopic()
				}
			},
			godeleteTopic(){
				deleteTopic({
					id:this.meetdeal.id
				}).then(res => {
					this.isLoading = false;
					console.log(res)
					if (res.code == 1) {
						this.page = 1;
						this.lastPage = 0;
						this.loadStatus = "";
						this.dataList1=[];
						this.getTopicmylistsdata();
						uni.showToast({
							title:'删除成功',
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			// 点击附件预览
			handleDownload(item) {
				console.log("=====item", item)
				let params = {
					url: item.fullurl, // 需要预览文件的地址(必填，可以使用相对路径)
					name: item.filename, // 需要预览文件的文件名(不填的话取url的最后部分)
					size: item.filesize, // 需要预览文件的字节大小(必填)
					type: item.mimetype
				}
				this.$store.dispatch('yulan', params)
			},
			cancel() {
				this.show = false;
				reason: ''
			},
			upTopics() {
				uni.navigateTo({
					url: '/pages/tabbar-1-detial/uploadTopics/uploadTopics?id=' + this.meet_id
					// url: '/pages/tabbar-1-detial/uploadTopics/editTopics?id=' + this.meetdeal.id
				});
			},
			// 驳回
			confirm() {},
			getTopicmylistsdata() {
				this.loadStatus = 'loading';
				this.isLoading = true;
				let params = {
					page: this.page,
					limit: this.limit,
					meet_id:this.meet_id 
				};
				getTopicmylists(params).then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					console.log(res)
					this.lastPage = res.data.last_page
					this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					this.dataList1 = [...this.dataList1, ...res.data.data]
				})
			}
		}
	}
</script>

<style scoped>
	@import "@/static/assets/css/index.css";
	@import "@/static/assets/css/mobiscroll.core-2.5.2.css";
	@import "@/static/assets/css/mobiscroll.animation-2.5.2.css";
	@import "@/static/assets/css/mobiscroll.android-ics-2.5.2.css";
	.content {
		background-color: #F8F8F8;
		height: 100vh;
	}

	.u-flex {
		display: flex;
		align-items: center;
	}

	.list {
		padding: 20rpx 30rpx;
	}

	.list-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		opacity: 1;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
    .flex-box{display: flex;justify-content: space-between;
	align-items: center;
		font-size: 28rpx;
		color: #333333;}
	.flex-text{
		font-size: 28rpx;
		color: #333333;
	}
	.user text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 10rpx;
	}

	.title {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 52rpx;
	}

	.images {
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.iamges-item {
		margin-right: 40rpx;
		position: relative;
	}
            
	.file-box {
		position: relative;
		margin: 20rpx 0;
		padding: 20rpx;
		background: #F8F9FC;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
	}

	.file-text {
		word-break: break-all;
	}
	 
    /deep/.u-text__value--main,/deep/ .u-text__value--content{
	  font-size:14px!important;
	  color: #303133!important;
    }
	.button-box {
		width: 128rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}

	.button1 {
		color: #4871C0;
		border: 1px solid #4871C0;
		margin-left: auto;
	}

	.button2 {
		color: #FFFFFF;
		background: #4871C0;
		margin-left: 20rpx;
	}

	.new-tip {
		position: absolute;
		top: 0;
		right: 0;
		width: 56rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: #FF7A00;
		border-radius: 0px 16rpx 0px 10rpx;
		opacity: 1;
		font-size: 18rpx;
		color: #fff;
		z-index: 22;
		text-align: center;
	}

	.reject {
		padding-left: 42rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 52rpx;
	}

	.reason-content {
		width: 100%;
		border-radius: 8rpx;
		opacity: 1;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	/deep/.u-textarea {
		background: #F8F8F8;
		border-radius: 8rpx;
		opacity: 1;
		text-align: left;
	}

	/deep/.uni-textarea-placeholder {
		text-align: left;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	/deep/ .u-steps-items {
		flex-direction: row !important;

		/deep/ .u-text {
			margin: 0 !important;
		}
	}

	.button {
		background: #4871C0;
		border-radius: 8rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		padding: 30rpx 0;
		position: fixed;
		width: calc(100% - 60rpx);
		bottom: 10rpx;
		left: 30rpx;
	}
</style>
